<template>
  <div
    class="context-menu"
    :style="{
      top: menu.y + 'px',
      left: menu.x + 'px',
    }"
  >
    <div class="menu-title">{{ menu.student?.name }}</div>
    <div class="menu-items">
      <div
        class="menu-item"
        @click="handleControl('mic')"
        :class="{ disabled: !menu.student?.hasMicrophone }"
      >
        <el-icon>
          <component :is="menu.student?.audioEnabled ? 'Mute' : 'Microphone'" />
        </el-icon>
        <span>{{
          menu.student?.audioEnabled ? "关闭麦克风" : "打开麦克风"
        }}</span>
      </div>
      <div
        class="menu-item"
        @click="handleControl('camera')"
        :class="{ disabled: !menu.student?.hasCamera }"
      >
        <el-icon>
          <component
            :is="menu.student?.videoEnabled ? 'VideoPlay' : 'VideoCamera'"
          />
        </el-icon>
        <span>{{
          menu.student?.videoEnabled ? "关闭摄像头" : "打开摄像头"
        }}</span>
      </div>
      <div class="menu-item" @click="$emit('kick', menu.student)">
        <el-icon><CircleClose /></el-icon>
        <span>移出房间</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  Microphone,
  Mute,
  VideoCamera,
  VideoPlay,
  CircleClose,
} from "@element-plus/icons-vue";

const props = defineProps({
  menu: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["close", "control", "kick"]);

const handleControl = (type) => {
  emit("control", type, props.menu.student);
};
</script>

<style lang="scss" scoped>
.context-menu {
  position: fixed;
  background: #2b2b2b;
  border-radius: 8px;
  min-width: 200px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;

  .menu-title {
    padding: 8px 16px;
    font-size: 14px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .menu-items {
    padding: 4px 0;
  }

  .menu-item {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #fff;
    transition: all 0.3s;

    &:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;

      &:hover {
        background: none;
      }
    }

    .el-icon {
      font-size: 16px;
    }
  }
}
</style>
